<template>
  <div class="taskbar">
    <ul>
      <li
        :class="[idx == index ? 'active' : '']"
        v-for="(item, index) in myList"
        :key="index"
        @click="handleOpenBox(item, index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import bus from "../assets/js/eventBus";
// import taskbarItem from "./taskbarItem";

export default {
  name: "taskbar",
  props: {},
  components: {},
  data() {
    return {
      myList: [],
      idx: -1,
    };
  },
  beforeDestroy () {
        bus.$off("taskbarDisplay");
        bus.$off("taskbarList");
        bus.$off("taskbarMini");
  },
  methods: {

    handleOpenBox(item, index) {
      let msg = {};
      console.log(this.idx);
      if (this.idx === index) {
        msg = {
          title: item,
          isdisplay: true,
        };
        this.idx = -1;
      } else {
        msg = {
          title: item,
          isdisplay: true,
        };
        this.idx = index;
      }
      bus.$emit("displayChang", msg);
    },
  },
  mounted() {
    bus.$on("taskbarDisplay", (msg) => {
      this.myList.splice(this.myList.indexOf(msg), 1);
      this.idx = -1;
    });
    bus.$on("taskbarList", (title) => {
      if (this.myList.indexOf(title) === -1) {
        this.myList.push(title);
      }
      this.idx = this.myList.indexOf(title);
    });
    bus.$on("taskbarMini", () => {
      this.idx = -1;
    });

  },
};

</script>

<style scoped>
.taskbar ul {
  list-style: none;
  display: flex;
  position: absolute;
  left: 50px;
  height: calc(100vh * 0.05);
  bottom: 0;
  align-items: center;
}

.taskbar ul li {
  /* display: inline-block; */
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: center;
  /* height: calc(100% - 3px); */
  height: 100%;
  border-bottom: 3px solid #0078d7;
  margin-right: 5px;
  position: relative;
  user-select: none;
}

.taskbar ul li::after {
  content: "";
  height: 3px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #0078d7;
}

.taskbar ul li:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.active {
  background-color: rgba(255, 255, 255, 0.6)
}
</style>
